<template>
  <div id="app">
    <h1>state中的数据 --- {{count}} </h1>
    <h1>{{title}} </h1>

    <input type="text" :value="count" @input="handleInput">
    <Son1 />
    <Son2 />
  </div>
</template>

<script>

import  Son1 from  './components/MySon1.vue'
import  Son2 from  './components/MySon2.vue'

//mapState  获取state中的数据
// 先导入  数组的方式 引入state  展开运算符映射
import { mapState } from 'vuex'


export default {
  name: 'App',
  components: {
    Son1,
    Son2
  },
  computed:{
    // 获取state中count的值
    ...mapState(['count','title'])
    // 同上
    // count (){
    //   return this.$store.state.count
    // }
  },

  created(){
    /**
     * 获取store
     * 1. vue模版中  this.$store
     * 2. js文件中 import 导入 store   直接用
     * 3. template 模版中 {{$store.state.xxx}}
     * 4. 组件逻辑中 this.$store.state.xxx
     * 5. JS模块中 store.state.xxx
     */
    console.log('created',this.$store)
  },
  methods:{
    handleInput(e){
      const num = e.target.value
      this.$store.commit('changeCount',num)
    }
  }
}
</script>

<style>

</style>
